<template>
  <div class="address">
    <!-- 顶部 -->
    <van-nav-bar
      title="我的收货地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
    >
    </van-nav-bar>
    <!-- 选择地址 -->
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
    <div class="bottom-button">
      <van-button @click="confirm">确认</van-button>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import { Toast } from "vant";
import router from "@/router";
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      chosenAddressId: "1",
      list: [],
    };
  },
  mounted() {
    this.axios.get(`/address/${this.uid}`).then((result) => {
      console.log(result.data);
      this.list = result.data.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 新增地址
    onAdd() {
      this.$router.push("/addaddress");
    },
    onEdit(item, index) {
      Toast("编辑地址:" + index);
    },
    // 点击确认
    confirm() {
      console.log(this.chosenAddressId);
      // 判断
      if (this.chosenAddressId == "") {
        Toast("请选择收货地址");
      } else {
        this.$router.push({
          name: "order",
          params: { key: this.chosenAddressId },
        });
      }
    },
  },
};
</script>

<style>
.address .van-nav-bar {
  background-color: rgb(222, 196, 155);
}
.address .van-nav-bar .van-icon,
.address .van-nav-bar__text,
.address .van-nav-bar__title {
  color: white;
}
.address .van-address-list__add {
  background-color: rgb(222, 196, 155);
  border: 0;
}
.address .van-address-list__bottom {
  bottom: 30px;
}
.address .bottom-button {
  position: fixed;
  bottom: 80px;
  left: 0;
  z-index: 999;
  box-sizing: border-box;
  width: 100%;
  padding: 0 16px;
  background-color: #fff;
}
.address .bottom {
  position: fixed;
  width: 100%;
  height: 30px;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background-color: #fff;
}
.address .bottom-button .van-button--normal {
  margin: 5px 0;
  background-color: #fff;
  border: 1px solid rgb(222, 196, 155);
  color: rgb(222, 196, 155);
  width: 100%;
  border-radius: 999px;
  height: 40px;
}
.address .van-radio-group > .van-address-item:first-child {
  margin-top: 46px;
}
.address .van-radio-group > .van-address-item:last-child {
  margin-bottom: 80px;
}
</style>